import { FC } from 'react'
import { propsType as QuestionTitleType, questionTitleConfig } from './QuestionTitle'
import { propsType as QuestionInputType, questionInputConfig } from './QuestionInput'
import { propsType as QuestionParagraphType, questionParagraphConfig } from './QuestionParagraph'
import { propsType as QuestionInfoType, questionInfoConfig } from './QuestionInfo'
import { propsType as QuestionTextareaType, questionTextareaConfig } from './QuestionTextarea'
import { propsType as QuestionRadioType, questionRadioConfig } from './QuestionRadio'
import { propsType as QuestionCheckobxType, questionCheckobxConfig } from './QuestionCheckobx'
import { nanoid } from 'nanoid'

// 组件的 props 类型
export type ComponentPropsType = QuestionTextareaType &
  QuestionTitleType &
  QuestionInputType &
  QuestionParagraphType &
  QuestionInfoType &
  QuestionRadioType &
  QuestionCheckobxType
// 组件的类型
export type ComponentType = {
  title: string
  type: string
  PropComponent: FC<ComponentPropsType>
  Component: FC<ComponentPropsType>
}

export const ComponentList: ComponentType[] = [
  questionTitleConfig,
  questionInputConfig,
  questionParagraphConfig,
  questionInfoConfig,
  questionTextareaConfig,
  questionRadioConfig,
  questionCheckobxConfig,
]

/**
 * 组件分组
 */
export const ComponentcofGroup = [
  {
    id: nanoid(),
    groupName: '文本显示',
    components: [questionTitleConfig, questionParagraphConfig, questionInfoConfig],
  },
  {
    id: nanoid(),
    groupName: '用户输入',
    components: [questionInputConfig, questionTextareaConfig],
  },
  {
    id: nanoid(),
    groupName: '用户选择',
    components: [questionRadioConfig, questionCheckobxConfig],
  },
]

/**
 *  根据组件类型获取组件
 */
export const getComponentByType = (type: string) => {
  return ComponentList.find(item => item.type === type)
}
